<template>
  <div class="page">
    <div class="page-title">{{ $t('user.accountSetting') }}</div>
    <Tabs v-model="tabValue">
      <TabPane v-if="false" label="个人信息" name="info"></TabPane>
      <TabPane :label="$t('user.shippingAddress')" name="address"></TabPane>
      <TabPane :label="$t('user.accountSecurity')" name="setting"></TabPane>
      <TabPane :label="$t('user.collectionAddress')" name="bank"></TabPane>
    </Tabs>
    <div class="content">
      <user-info v-if="false"></user-info>
      <user-addr v-show="tabValue == 'address'"></user-addr>
      <user-secure v-show="tabValue == 'setting'"></user-secure>
      <user-bank v-show="tabValue == 'bank'"></user-bank>
      <user-bill v-if="false"></user-bill>
    </div>
  </div>
</template>

<script>
import UserInfo from "@/views/main/user/account-setting/user-info";
import UserAddr from "@/views/main/user/account-setting/user-addr";
import UserBill from "@/views/main/user/account-setting/user-bill";
import UserSecure from "@/views/main/user/account-setting/user-secure";
import UserBank from "@/views/main/user/account-setting/user-bank";
export default {
  name: "points",
  components: { UserBank, UserSecure, UserBill, UserAddr, UserInfo },
  data() {
    return {
      tabValue: 'address'
    }
  },
  created() {
    if (this.$route.query.type) {
      this.tabValue = this.$route.query.type;
    }
  }
}
</script>

<style scoped lang="less">
.page {
  border-radius: 20px;
  background: #FFF;
  padding: 20px;

  .page-title {
    color: #2F333A;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 12px;
  }

  :deep(.ivu-tabs-tab) {
    font-family: "AlibabaSans-Regular" !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    padding-bottom: 14px;
    padding: 15px 0;
  }

  :deep(.ivu-tabs-ink-bar) {
    height: 2px;
    background: #FF186B !important;
  }

  :deep(.ivu-tabs-tab-active) {
    color: #FF186B !important;
  }

  .content {
    margin-top: 20px;
  }
}
</style>